<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>热聘网</title>
    <link type="text/css"  rel="stylesheet"  href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script>
    <script type="text/javascript" src="js/jquery.touchSlider.js"></script>


</head>
<body>
<div id="header">
	<div class="header_left">
    	<div class="logo"></div>
        <div class="nav"><a  class="home"href="#">首页</a> <a  class="JobSearch"href="#">职位搜索</a><a class="traderesource" href="#">行业资源搜索</a>
        </div>
    </div>
    <div class="header_right">
    	<div class="debark"><a href="#">个人登陆</a> / <a href="#">注册</a></div>
        <div class="company">
        <a  class="hr"href="#">企业登陆</a> / <a href="#">注册</a></div>
    </div>
</div>

<!--banner-->
<!--焦点图开始-->
<div class="main_visual">
	<div class="flicking_con">
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
    </div>
    <div class="main_image">
        <ul>
            <li><span class="img_3"></span></li>
            <li><span class="img_4"></span></li>
            <li><span class="img_2"></span></li>
            <li><span class="img_5"></span></li>
        </ul>
        <a href="javascript:;" id="btn_prev"></a>
        <a href="javascript:;" id="btn_next"></a>
    </div>
</div>
<!--焦点图结束-->
<div id="tontent">
	<div class="search">
    	<ul class="search_top">
        	<li><a class="individuation"href="#">个性化搜索</a>|</li>
            <li><a class="ManufacturingWorker" href="#">普工搜索</a>|</li>
            <li><a class="freshgraduate" href="#">应届生搜索</a></li>
        </ul>
        <script type="text/javascript">
        	$(".search_top a").click(function(){
				$(".search_top a").css("background","");
				$(".search_top a").css("color","");

				$(this).css("background","#5BC9E0");
				$(this).css("color","#fff");

			});
        </script>
        <div class="search_b">
            <div class="Companyname">
            <input class="text_left" type="text" value="请选择职位名称或企业名称"/>
            </div>
            <div class="Employmentregion">
            <input class="text_right" type="text" value="请选择工作地区"/>
            </div>
            <div class="Submitbutton">
            	<a class="but" href="#">搜索</a>
            </div>
    	</div>
        </div>
    	
</div>
<!--热门分类-->
<div id="hot">
	<ul class="hotClass">
    	<li class="hotClass_li factoryClass">
            <img imgnum="1" src="images/hot1.png" width="42" height="40" style=" margin-top:5px;" /><span>工厂</span>
            <div  class="factory" >
                <ul>
                   <a href="#"><li class="wuJin">五金厂<br/><img src="images/ico/wuJin.png" width="30" height="30" /></li></a>
                    <a href="#"><li class="fuZhuang">服装厂<br/><img src="images/ico/fuZhuang.png" width="30" height="30" /></li></a>
                    <a href="#"><li clss="suJiao">塑胶厂<br/><img src="images/ico/suJiao.png" width="30" height="30" /></li></a>
                </ul>
            </div>
        </li>
        <li class="hotClass_li hotelsClass">
        	<img imgnum="2" src="images/hot2.png" width="45" height="36" /> <span>酒店</span>
            <div id="hotels" >
                <ul>
                    <a href="#"><li>普通酒店<br/><img src="images/ico/puTongJiuDian.png" width="30" height="30" /></li></a>
                    <a href="#"><li>五星酒店<br/><img src="images/ico/酒店 五星.png" width="30" height="30" /></li></a>
                </ul>
            </div>
        </li>
        <li class="hotClass_li diningClass">
        	<img imgnum="3" src="images/hot3.png" width="32" height="40" /> <span>餐饮</span>
            <div id="dining">
                <ul>
                    <a href="#"><li>中餐<br/><img src="images/ico/zhongCan.png" width="30" height="30" /></li></a>
                    <a href="#"><li>西餐<br/><img src="images/ico/xiCan.png" width="30" height="30" /></li></a>
                    <a href="#"><li>面点<br/><img src="images/ico/mianDian.png" width="30" height="30" /></li></a>
                </ul>
            </div>
        </li>
        <li class="hotClass_li schoolClass">
        	<img imgnum="4" src="images/hot4.png" width="44" height="35" /> <span>学校</span>
            <div id="school">
                <ul>
                    <a href="#"><li>大学<br/><img src="images/ico/daXue.png" width="30" height="30" />
                    </li>
                    </a>
                    <a href="#"><li>中学<br/><img src="images/ico/zhongXue.png" width="30" height="30" /></li></a>
                    <a href="#"><li>幼儿园<br/><img src="images/ico/youErYuan.png" width="30" height="30" /></li></a>
                </ul>
            </div>
        </li>
        <li class="hotClass_li medicineClass">
        	<img imgnum="5" src="images/hot5.png" width="43" height="37" /> <span>医疗</span>
            <div id="medicine">
                <ul>
                    <a href="#"><li>医院<br/><img src="images/ico/yiYuan.png" width="30" height="30" /></li></a>
                    <a href="#"><li>药店<br/><img src="images/ico/yaoDian.png" width="30" height="30" /></li></a>
                </ul>
            </div>
        </li>
        <li class="hotClass_li carClass" style="border:0px;">
        	<img imgnum="6" src="images/hot6.png" width="41" height="34" /> <span>汽车</span>
            <div id="car" >             
                <ul>
                    <a href="#"><li>汽车管理<br/><img src="images/ico/qiCheGuanLi.png" width="30" height="30" /></li></a>
                    <a href="#"><li>二手车市场<br/><img src="images/ico/qiCheFuWu.png" width="30" height="30" />
                    </li></a>
                </ul>
            </div>
        </li>
    </ul>
    <div class="hot_background"></div>
</div>
<!--热门分类结束-->
<!--版权信息-->
<div class="copyrightgroup">
    	<div class="copyright">
        	<div class="copyright_top"><a href="#">关于我们</a> &nbsp|&nbsp <a href="#">热聘动态</a>&nbsp |&nbsp <a href="#">加入热聘</a>&nbsp |&nbsp <a href="#">联系我们</a>&nbsp | &nbsp<a href="#">个人求职</a> &nbsp|&nbsp <a href="#">企业招聘</a> &nbsp|&nbsp <a href="#">法律声明</a>&nbsp | &nbsp<a href="#">隐私保护</a> &nbsp|&nbsp <a href="#">用户协议</a>
            </div>
            <div class="copyright_bottom">©东莞市小矮人网络科技有限公 版权所有 粤ICP备15061385号-2</div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){

            $(".main_visual").hover(function(){
                $("#btn_prev,#btn_next").fadeIn()
            },function(){
                $("#btn_prev,#btn_next").fadeOut()
            });

            $dragBln = false;

            $(".main_image").touchSlider({
                flexible : true,
                speed : 200,
                btn_prev : $("#btn_prev"),
                btn_next : $("#btn_next"),
                paging : $(".flicking_con a"),
                counter : function (e){
                    $(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
                }
            });

            $(".main_image").bind("mousedown", function() {
                $dragBln = false;
            });

            $(".main_image").bind("dragstart", function() {
                $dragBln = true;
            });

            $(".main_image a").click(function(){
                if($dragBln) {
                    return false;
                }
            });

            timer = setInterval(function(){
                $("#btn_next").click();
            }, 5000);

            $(".main_visual").hover(function(){
                clearInterval(timer);
            },function(){
                timer = setInterval(function(){
                    $("#btn_next").click();
                },5000);
            });

            $(".main_image").bind("touchstart",function(){
                clearInterval(timer);
            }).bind("touchend", function(){
                timer = setInterval(function(){
                    $("#btn_next").click();
                }, 5000);
            });

        });

        $(function(){
            //鼠标移入称出图标导航事件

            $(".factoryClass,.hotelsClass,.diningClass,.schoolClass,.medicineClass,.carClass").mouseenter(function(){
                ElementHide();
                $(this).children('div').show();
                var imgnumber=$(this).children('img').first();
                var num=imgnumber.attr("imgnum");
                imgnumber.attr("src","images/hot"+num+"_b.png");
            });
            $(".factoryClass,.hotelsClass,.diningClass,.schoolClass,.medicineClass,.carClass").mouseleave(function(){
                var imgnumber=$(this).children('img').first();
                var num=imgnumber.attr("imgnum");
                imgnumber.attr("src","images/hot"+num+".png");
                $(this).children('div').hide();
                // ElementHide();
            });

            $(".factory,#hotels,#dining,#school,#medicine,#car").mouseleave(function(){
                 $(this).hide();
            })
        })

        function ElementHide(){
            $("#car,#medicine,#school,#dining,#hotels,.factory").hide()
        };
    </script>
</body>
</html>
